<template>
	<view class="activepages" style="position: relative;">		
		<view class="" v-if="!showDefaultAppPage"
			:style="{backgroundColor:`${pageBackGroundColor}`,backgroundImage:`url(${pageDivData.pageBackPic?pageDivData.pageBackPic : ''})`, 'backgroundSize': '100% 100%' }">
			<!-- 自定义页面组件 -->
			<block v-for="(temp, index) in pageDivData.pageComponent.componentsList" :key="index">
				<!-- 单图 -->
				<template v-if="temp.componentName === 'imageComponent'">
					<view>
						<div-image v-model="temp.data"></div-image>
					</view>
				</template>
				<!-- 双图 -->
				<template v-else-if="temp.componentName === 'multipleImage'">
					<view>
						<div-image-double v-model="temp.data"></div-image-double>
					</view>
				</template>
				<!-- 三图 -->
				<template v-else-if="temp.componentName === 'imageThreeComponent'">
					<view>
						<div-image-three v-model="temp.data"></div-image-three>
					</view>
				</template>
				<!-- 标题文字 -->
				<template v-else-if="temp.componentName === 'titleTextComponent'">
					<view>
						<div-title-text v-model="temp.data"></div-title-text>
					</view>
				</template>
				<!-- 商品 -->
				<template v-else-if="temp.componentName === 'goodsComponent'">
					<view>
						<div-goods v-model="temp.data" :activityId="activityId" gType="yc" v-if="activityId"></div-goods>
					</view>
				</template>
			</block>
			<!-- <view :class="'cu-load bg-gray ' + (loadmore3?'loading':'over')"></view> -->
		</view>
		<!-- 如果没有自定义页面就用自带页面 -->
		<view v-if="showDefaultAppPage">
			<view style="text-align: center;margin-top: 20rpx;">暂无内容</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import api from '@/utils/api'

	import divImage from "@/components/div-components-active/div-image/div-image.vue";
	import divImageDouble from "@/components/div-components-active/div-image-double/div-image-double.vue"
	import divImageThree from "@/components/div-components-active/div-image-three/div-image-three.vue";
	import divTitleText from "@/components/div-components-active/div-title-text/div-title-text.vue";
	import divGoods from "@/components/div-components-active/div-goods/div-goods.vue";

	export default {
		name: 'yc-activePages',
		data() {
			return {
				showDefaultAppPage: false,
				pageDivData: {
					pageComponent: {
						componentsList: []
					}
				}, //首页自定义配置组件的数据		
				loadmore3: true, // 自定义页面的加载状态		
				pageBackGroundColor: '',
				activityId:''
			}
		},
		props: {
			actId: {
				type: String,
				default: ''
			}
		},
		components: {
			divImage,
			divImageDouble,
			divImageThree,
			divTitleText,
			divGoods
		},
		created() {},
		watch:{
			actId:{
				handler(val, oldVal) {
					this.activityId = val
					this.getPageComponent()
				},
				immediate: true 
			}
		},
		methods: {
			getPageComponent() {
				this.pageDivData = {
					pageComponent: {
						componentsList: []
					}
				}
				this.loadmore3 = true;
				api.getActiveList(this.activityId).then(res => {
					let pageDivData = res.data;
					if (pageDivData) {
						this.pageDivData = pageDivData;
						this.pageBackGroundColor = pageDivData.pageBackPic ? '#FFFFFF' : pageDivData
							.pageBackGroundColor
						if (Object.keys(pageDivData.pageComponent).length === 0) {
							// 如果没有设置自定义页面数据，那就显示默认原始页面
							this.getDefaultPageData();
						} else {
							this.showDefaultAppPage = false;
							this.loadmore3 = false;
						}
					} else {
						// 如果没有设置自定义页面数据，那就显示默认原始页面
						this.getDefaultPageData();
					}
				});
			},
			getDefaultPageData() {
				this.showDefaultAppPage = true;
				this.loadmore3 = false;
			},
		}
	}
</script>

<style>
</style>